<template>
  <div class="workOrder zy-content">
    <div class="searchBox search-box-layout">
      <Row :gutter="24">
        <Col span="6">
          <div>
            <p class="label">{{ $t('preliminary.Location') }}</p>
            <div class="ipt">
              <Cascader clearable
                        :data="orgList"
                        transfer
                        @on-change="handleCasChangenew"
                        v-model="orgIdInfo"
                        :placeholder="`${$t('common.selectInfo')}`" change-on-select></Cascader>
            </div>
          </div>
        </Col>

        <Col span="4">
          <div>
            <p class="label">{{ $t('maintenance.EquipmentNo') }}</p>
            <div class="ipt">
              <Select
                  v-model="searchParams.deviceName"
                  filterable
                  clearable
                  :remote-method="getDeviceNameList"
                  :placeholder="`${$t('common.selectInfo')}`"
              >
                <Option
                    v-for="(item) of deviceNameList"
                    :value="item.value"
                    :key="item.value"
                    :label="item.label"
                />
              </Select>
            </div>
          </div>
        </Col>



        <Col span="4">
          <div>
            <p class="label">{{ $t('fault.RenovationTime') }}</p>
            <div class="ipt">
              <DatePicker type="datetimerange"
                          v-model="dateTimeRange"
                          :placeholder="$t('common.PleaseSelect')"
                          transfer-class-name="hide-handle-cancel"
                          placement="bottom"
                          transfer
                          @on-change="handleChangeDate">
              </DatePicker>
            </div>
          </div>
        </Col>



        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button class="search-btn" v-has="'faultStatementWorkSearch'" type="primary" @click="changeNum()">{{ $t('common.Query') }}</Button>
              <Button v-has="'faultStatementWorkSearch'"
                      class="reset-btn"
                      @click="reset"
              >{{ $t('common.reset') }}
              </Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>

    <div class="list-layout mt16">
     <div class="cardList_Box">
       <Row>
         <Col span="24">
           <Row>
             <Col span="6" class="carItem">
               <div class="carBox" @click="goProduct">
                 <span class="text">报修数量</span>
                 <span class="num">{{dataObj['1']}}</span>
               </div>
             </Col>

             <Col span="6" class="carItem">
               <div class="carBox" @click="goProduct">
                 <span class="text">待响应数量</span>
                 <span class="num">{{dataObj['2']}}</span>
               </div>
             </Col>

             <Col span="6" class="carItem">
               <div class="carBox" @click="goProduct">
                 <span class="text">处理中数量</span>
                 <span class="num">{{dataObj['3']}}</span>
               </div>
             </Col>

             <Col span="6" class="carItem">
               <div class="carBox" @click="goProduct">
                 <span class="text">待验收数量</span>
                 <span class="num">{{dataObj['4']}}</span>
               </div>
             </Col>

             <Col span="6" class="carItem">
               <div class="carBox" @click="goProduct">
                 <span class="text">已结单数量</span>
                 <span class="num">{{dataObj['5']}}</span>
               </div>
             </Col>
           </Row>
         </Col>
       </Row>
     </div>
    </div>

  </div>
</template>

<script>
import fileDownload from "js-file-download";
import recursion from "@/util/recursion";

export default {
  name: "statementWorkOrder",
  data() {
    return {
      optionsdate: {
        disabledDate(date) {
          return date && date.getTime() > Date.now();
        },
      },
      orgIdInfo: [],
      ids: [],
      dataObj: {},
      searchParams: {},
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pageSizeOption: [10, 20, 30],
      statusList: [
        {id: 0, name: "待到货"},
        {id: 1, name: "到货中"},
        {id: 2, name: "已完成"},
      ],
      orderStatusList: [
        {id: 1, name: '未分配'},
        {id: '0', name: '待确认'},
        {id: 2, name: '故障待确认'},
        {id: 3, name: '委外待确认'},
        {id: 4, name: '待维修'},
        {id: 5, name: '维修中'},
        {id: 6, name: '已完工'},
        {id: 7, name: '已验收'},
        {id: -1, name: '已驳回'},
      ],
      maintainModeList: [
        {id: 0, name: '自行维修'},
        {id: 1, name: '保修期内维修'},
        {id: 2, name: '委外维修'},
      ],
      workOrderSourceList: [
        {id: 0, name: '否'},
        {id: 1, name: '是'},
      ],
      effects: [
        {label: "影响生产停机", value: 2},
        {label: "影响生产未停机", value: 1},
        {label: "不影响生产", value: 0},
      ],
      faultPartList: [
        // {id: '0', name: '发动机'},
      ],
      faultList: [],
      faultTypeList: [],
      orgList: [],
      columns: [
        {
          key: "selection",
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: `${this.$t('fault.OrderReport')}`,
          key: "workOrderStatusStr",
          align: "center",
          minWidth: 120,
          render: (h, params) => {
            let color = "#999999"
            if (params.row.workOrderStatus === -1) {
              color = '#f24b67'
            } else if (params.row.workOrderStatus === 7) {
              color = '#187bdb'
            } else if (params.row.workOrderStatus === 6) {
              color = '#36ce53'
            } else if (params.row.workOrderStatus === 5) {
              color = '#ecbc18'
            }
            return h(
                "div", {
                  class: 'box',
                  style: {
                    padding: '5px 0',
                    borderRadius: '20px',
                    border: `1px solid ${color}`,
                    color: color
                  }
                },
                params.row.workOrderStatusStr
            );
          },
        },
        {
          title: `${this.$t('fault.WorkOrderNumber')}`,
          key: "workOrderNo",
          align: "center",
          minWidth: 180,
        },
        {
          title: `${this.$t('fault.FromAndon')}`,
          key: "workOrderSourceStr",
          align: "center",
          minWidth: 160,
        },
        {
          title: `${this.$t('fault.ImpactProduction')}`,
          slot: "affectProductionFlagStr",
          align: "center",
          minWidth: 160,
        },
        {
          title: `${this.$t('maintenance.EquipmentNo')}`,
          key: "deviceNo",
          align: "center",
          minWidth: 130,
        },
        {
          title: `${this.$t('equipCheck.SerialNo')}`,
          key: "deviceMId",
          align: "center",
          minWidth: 150,
        },
        {
          title: `${this.$t('设备等级')}`,
          key: "categoryName",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            return h(
                "div",
                params.row.categoryName ? params.row.categoryName : ''
            );
          },
        },
        {
          title: `${this.$t('preliminary.Entity')}`,
          key: "companyName",
          align: "center",
          minWidth: 200,
          // tooltip: true,
        },
        {
          title: `${this.$t('preliminary.Location')}`,
          key: "position4",
          align: "center",
          minWidth: 240,
          tooltip: true
        },
        {
          title: `${this.$t('报修人')}`,
          key: "maintainApplyByStr",
          align: "center",
          minWidth: 200,
        },
        {
          title: `${this.$t('fault.Maintenance')}`,
          key: "receiveOrderByStr",
          align: "center",
          minWidth: 200,
        },
        {
          title: `${this.$t('故障时间')}`,
          key: "faultTime",
          align: "center",
          minWidth: 200,
        },
        {
          title: `${this.$t('fault.theStartingTime')}`,
          key: "maintainApplyTime",
          align: "center",
          minWidth: 200,
        },

        {
          title: `${this.$t('接单时间')}`,
          key: "receiveOrderTime",
          align: "center",
          minWidth: 200,
        },
        {
          title: `${this.$t('故障确认时间')}`,
          key: "maintainConfirmTime",
          align: "center",
          minWidth: 200,
        },
        {
          title: `${this.$t('维修开始时间')}`,
          key: "maintainStartTime",
          align: "center",
          minWidth: 200,
        },
        {
          title: `${this.$t('故障现象')}`,
          key: "faultMessage",
          align: "center",
          tooltip: true,
          minWidth: 150,
        },
        {
          title: `${this.$t('故障类型')}`,
          key: "faultTypeName",
          align: "center",
          minWidth: 150,
        },

        {
          title: `${this.$t('故障部件')}`,
          key: "faultPart",
          align: "center",
          minWidth: 220,
          tooltip: true,
        },
        {
          title: `${this.$t('fault.FaultClassification')}`,
          key: "faultCategory",
          align: "center",
          minWidth: 120,
        },
        {
          title: `${this.$t('故障原因')}`,
          key: "faultReason",
          align: "center",
          minWidth: 250,
          tooltip: true,
        },
        {
          title: `${this.$t('解决办法和预防措施')}`,
          key: "solution",
          align: "center",
          minWidth: 260,
          tooltip: true,
        },
        {
          title: `${this.$t('fault.RepairingMode')}`,
          key: "maintainModeStr",
          align: "center",
          minWidth: 140,
        },
        {
          title: `${this.$t('fault.CompletionTime')}`,
          key: "maintainEndTime",
          align: "center",
          minWidth: 200,
        },


//验收时间、复核时间、响应时长、维修时长、停机时长字段
        {
          title: `${this.$t('验收时间')}`,
          key: "maintainCheckTime",
          align: "center",
          minWidth: 200,
        },
        {
          title: `${this.$t('复核时间')}`,
          key: "reviewTime",
          align: "center",
          minWidth: 200,
        },
        {
          title: `${this.$t('响应时长')}(H)`,
          key: "responseTime",
          align: "center",
          minWidth: 250,
        },
        {
          title: `${this.$t('维修时长')}(H)`,
          key: "repairCostTime",
          align: "center",
          minWidth: 200,
        },
        {
          title: `${this.$t('停机时长')}(H)`,
          key: "downtime",
          align: "center",
          minWidth: 200,
        },

        {
          title: `${this.$t('common.operation')}`,
          slot: "action",
          minWidth: this.util.autoWidth(270,300),
          align: "center",
          fixed: "right",
        },
      ],
      deviceNameList: [],
      dataSource: [],
      companyList: [], // 所属公司
      dateTimeRange: [],
      repairList:[],
      mainList:[]
    };
  },
  created() {
    this.changeNum();
    this.getCompany();
    // this.getFaultType()
    this.getFaultTypeList()
    this.getOrgList()
  },
  methods: {
    goProduct(){
      this.$router.push({ path: '/fault/statement/workOrder'})
    },
    getDeviceNameList(deviceName) {
      this.axios({
        method: 'get',
        url: '/dms/dcmMaintainItem/selectDeviceNames',
        params: {
          deviceName
        }
      }).then(res => {
        if (res.code == 200) {
          this.deviceNameList = res.data.map(val => ({
            label: val,
            value: val
          }))
        }
      })
    },
    getFaultPosition(query){
      if (query)
        this.axios({
          method: 'post',
          url: '/dms/dmsBom/queryByDeviceTypeAndDeviceName',
          data: {param:query}
        }).then(res => {
          if (res.code === 200) {
            this.faultPartList = res.data
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
          }
        })
      else
        this.faultPartList = []
    },
    getMainList(query){
      if (query)
        this.axios({
          method: 'post',
          url: '/dms/workOrder/getUsers',
          data: {empno:query}
        }).then(res => {
          if (res.code === 200) {
            this.mainList = res.data
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
          }
        })
      else
        this.mainList = []
    },
    getRepairList(query){
      if (query)
        this.axios({
          method: 'post',
          url: '/dms/workOrder/getUsers',
          data: {empno:query}
        }).then(res => {
          if (res.code === 200) {
            this.repairList = res.data
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
          }
        })
      else
        this.repairList = []
    },
    openList(val){
      if (val && !(this.faultList && this.faultList.length)){
        this.getFaultType()
      }
    },
    //获取故障数据
    getFaultType(faultName) {
      this.axios({
        method: 'post',
        url: '/dms/faultCategory/selectCategory',
        data: {faultName}
      }).then(res => {
        if (res.code === 200) {
          this.faultList = res.data
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
        }
      })
    },
    //获取故障类型数据
    getFaultTypeList() {
      this.axios({
        method: 'post',
        url: '/dms/faultType/selectType',
        data: {typeCode: '', typeName: ''}
      }).then(res => {
        if (res.code === 200) {
          this.faultTypeList = res.data
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
        }
      })
    },
    // 获取使用位置
    getOrgList() {
      this.axios({
        method: 'get',
        url: '/basic/organization/findListByToken',
        params: {}
      }).then(res => {
        if (res.code === 200) {
          const obj = {
            label: 'name',
            value: 'id',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    getCompany() {
      this.axios({
        method: "get",
        url: "/basic/company/getCompanyListByUser",
      }).then((res) => {
        if (res.code === 200) {
          this.companyList = res.data
        }
      });
    },
    //日期
    handleChangeDate(val) {
      this.searchParams.startTime = val[0];
      this.searchParams.endTime = val[1];
    },
    // 分配
    allot(row) {
      this.$refs.signleMemberModal.show(row)
    },
    // 详情
    showDetail(row) {
      const userId = localStorage.getItem('ziyunFactoryUserId')
      this.$router.push({
        path:"/fault/statement/workOrderDetail",
        query:{
          id:row.id,
          status:+userId === row.receiveOrderBy ? `${row.workOrderStatus}` : false
        }
      })
    },
    // 删除
    deleteOrder(row) {
      this.axios({
        method: "get",
        url: "/dms/statistical/delete",
        params: {workOrderId: row.id}
      }).then((res) => {
        if (res.code === 200) {
          this.$Message.success('删除成功！')
          if (this.ids.includes(row.id)) {
            this.ids = this.ids.filter(v => v !== row.id)
          }
          this.searchList()
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      });
    },
    reset(){
        this.orgIdInfo = []
        this.dateTimeRange = []
        this.searchParams = {};
        this.searchParams.dateTimeRange = [];
        this.$forceUpdate()
        this.changeNum();
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    handleCasChangenew(val) {
      this.searchParams.orgId = val[val.length - 1]
    },
    searchList() {
      //查询列表
      let params = {
        // pageNum: this.pageNum,
        // pageSize: this.pageSize,
        ...this.searchParams,
        // orderStatus: this.searchParams.orderStatus && [this.searchParams.orderStatus],
        orgId: this.searchParams.orgId
      };
      this.axios({
        method: "post",
        url: "/dms/workOrder/maintainSpectaculars",
        data: params,
      }).then((res) => {
        if (res.code === 200) {
          this.dataObj = res.data
          // this.dataSource = res.data.list;
          // this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    onSelectChange(selectionData) {
      this.ids = selectionData.map(v => v.id);
    },
    //导出
    exportTemplateClick() {
      let params = {
        // pageNum: this.pageNum,
        // pageSize: this.pageSize,
        workOrderIds: this.ids,
        orderStatus: this.searchParams.orderStatus && [this.searchParams.orderStatus],
        maintainMode: this.searchParams.maintainMode,
        faultPart: this.searchParams.faultPart,
        faultCategoryId: this.searchParams.faultCategoryId,
        faultTypeId: this.searchParams.faultTypeId,
        deviceNo: this.searchParams.deviceNo,
        companyId: this.searchParams.companyId,
        orgId: this.searchParams.orgId && this.searchParams.orgId.at(-1),
        workOrderSource: this.searchParams.workOrderSource,
        startTime: this.searchParams.startTime,
        endTime: this.searchParams.endTime,
      };
      const filName = "工单报表";
      this.axios({
        method: "post",
        url: "/dms/statistical/export",
        responseType: "blob",
        data: params,
      }).then((res) => {
        fileDownload(res, filName + ".xlsx");
      });
    },
  },
};
</script>
<style lang="scss">
.cardList_Box{
  .carItem{
    padding: 0 5px;
    margin-bottom: 10px;
  }
  .carBox{
    box-shadow: 0 0 4px #808080;
    cursor: pointer;
    width: 100%;
    height: 120px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .text{font-size: 15px; font-weight: bold;}
    .num{font-size: 15px; font-weight: bold;
      color: #035beb;}
  }
}

</style>



